<!DOCTYPE html>
<!--[if lt IE 7]>  <html class="ie ie6 lte9 lte8 lte7 no-js"> <![endif]-->
<!--[if IE 7]>     <html class="ie ie7 lte9 lte8 lte7 no-js"> <![endif]-->
<!--[if IE 8]>     <html class="ie ie8 lte9 lte8 no-js">      <![endif]-->
<!--[if IE 9]>     <html class="ie ie9 lte9 no-js">           <![endif]-->
<!--[if gt IE 9]>  <html class="no-js">                       <![endif]-->
<!--[if !IE]><!--> <html class="no-js">                       <!--<![endif]-->
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

    <title>ELITE - A Powerfull Responsive Admin Theme</title>
    
	<!-- 
    ***************************************
    DEMO - DEMO - DEMO - DEMO - DEMO - DEMO
    
    This demo is modifyed to perfom 
    better(as our servers anr't that fast)
    Most cusom files are compressed and 
    are not readable.
    ***************************************
    -->
    
	<link rel="apple-touch-icon-precomposed" sizes="144x144" href="apple-touch-icon-144x144-precomposed.html">
    <link rel="apple-touch-icon-precomposed" sizes="114x114" href="images/mobile/apple-touch-icon-114x114.png" />
    <link rel="apple-touch-icon-precomposed" sizes="72x72" href="images/mobile/apple-touch-icon-72x72.png" />
    <link rel="apple-touch-icon-precomposed" href="images/mobile/apple-touch-icon.png" />
    <link rel="shortcut icon" href="images/apple-touch-icon.html" />
    <link rel="apple-touch-startup-image" media="(max-device-width: 480px) and not (-webkit-min-device-pixel-ratio: 2)" href="images/mobile/splash-320x460.png" />
    <link rel="apple-touch-startup-image" media="(max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2)" href="images/mobile/splash-640x920-retina.png" />
    <link rel="apple-touch-startup-image" media="(min-device-width: 768px) and (orientation: portrait)" href="images/mobile/splash-768x1004.png" />
    <link rel="apple-touch-startup-image" media="(min-device-width: 768px) and (orientation: landscape)" href="images/mobile/splash-1024x748.png" />
    <link rel="apple-touch-startup-image" media="(min-device-width: 1536px) and (orientation: portrait)" href="images/mobile/splash-1536x2008-retina.png" />
    <link rel="apple-touch-startup-image" media="(min-device-width: 2048px) and (orientation: landscape)" href="images/mobile/splash-2048x1496-retina.png" />
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="HandheldFriendly" content="true"/>   
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" /> 
    <script src="js/mobiledevices.js"></script>

    <meta name="application-name" content="Elite Admin Skin">
    <meta name="msapplication-tooltip" content="Cross-platform admin skin.">
    <meta name="msapplication-starturl" content="http://themes.creativemilk.net/elite/html/index.html">
    <meta name="msapplication-task" content="name=Home;action-uri=http://themes.creativemilk.net/elite/html/index.html;icon-uri=http://themes.creativemilk.net/elite/html/images/favicons/favicon.ico">
    <meta http-equiv="cleartype" content="on" /> 
    
    <!--[if lt IE 8]>
	<script src="http://ie7-js.googlecode.com/svn/version/2.1(beta4)/IE8.js"></script>
    <![endif]-->

    <link rel="stylesheet" href="css/framework.css"/>
    <link rel="stylesheet" href="css/style.css"/>
    <link rel="stylesheet" href="css/ui/jquery.ui.base.css"/>
    <link rel="stylesheet" href="css/theme/darkblue.css" id="themesheet"/>
	<!--[if IE 7]>
	<link rel="stylesheet" href="css/destroy-ie6-ie7.css"/>
    <![endif]-->
    
    <link rel="shortcut icon" href="images/favicons/favicon.ico" />

    <script src="../../ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
    <script>!window.jQuery && document.write('<script src="js/jquery-1.7.2.min.js"><\/script>')</script>
    <script src="../../code.jquery.com/ui/1.8.22/jquery-ui.min.js"></script>
    <script>!window.jQueryUI && document.write('<script src="js/jquery-ui-1.8.22.min.js"><\/script>')</script>
    <script src="js/jquery.ui.touch-punch.min.js"></script>
    <script src="js/jquery.mousewheel.min.js"></script>
	<script src="js/jquery.ui.spinner.js"></script>            
    <script src="js/tipsy.js"></script>                       
    <script src="js/treeview.js"></script>                      
    <script src="js/fullcalendar.min.js"></script>               
    <script src="js/selectToUISlider.jQuery.js"></script>       
    <script src="js/jquery.contextMenu.js"></script>            
    <script src="js/elfinder.min.js"></script>                  
    <script src="js/autogrow-textarea.js"></script>              
    <script src="js/textarearesizer.min.js"></script>
    <script src="wysiwyghtml5/parser_rules/advanced.js"></script>
	<script src="wysiwyghtml5/dist/wysihtml5-0.3.0.js"></script>                    
    <script src="js/jquery.colorbox-min.js"></script>
    <script src="js/jquery.dataTables.min.js"></script>
    <script src="js/jquery.maskedinput-1.3.min.js"></script> 
    <script src="js/json2.js"></script>
    <script src="audiojs/audiojs/audio.min.js"></script> 
    <script src="js/e_styleswitcher.1.0.min.js"></script>                 
    <script src="js/main.js"></script>  
            
    <!-- // HTML5/CSS3 support // -->

    <script src="js/modernizr.min.js"></script>
                
</head>
<body class="layout_fluid layout_responsive"> 

    <!-- this part can be removed, its just here 
         to let you switch between styles and layout sizes -->
    <div id="e-styleswitcher">
        <div class="e-styleswitcher-inner">
            <div class="e-styleswitcher-arrow"><img src="images/icons/plix-16/white/arrow-right-16.png" alt="" /></div>
            <div class="box">
            	<h4>Styles</h4>
                <select id="choose-styling">
                	<option value="strangeblue">Strange blue</option>
                    <option value="black">Black</option>
                    <option value="darkblue">Dark blue</option>
                    <option value="lightgrey">Light grey</option>
                </select>
            </div>    
            <div class="box">
            	<h4>Layout sizes</h4>                
                <select id="set-layout-size">
                	<option value="layout_fluid">fluid</option>
                    <option value="layout_768">768</option>
                    <option value="layout_960">960</option>
                    <option value="layout_1024">1024</option>
                    <option value="layout_1200">1200</option>
                    <option value="layout_1600">1600</option>
                </select>
            </div> 
            <div class="box">
            	<h4>Responsive</h4>                
                <select id="set-layout-responsive">
                	<option value="layout_responsive">yes</option>
                    <option value="">no</option>
                </select>
            </div>
            <div class="box">
            	<h4>Get theme</h4>                
                <select id="get-theme">
                	<option value="">no</option>
                    <option value="yes">yes</option>
                </select>
            </div>                         
        </div>
    </div>
  
	<div id="container">
    
        <!-- MAIN HEADER -->
                
        <header id="header">
        	<div id="header-border">
                <div id="header-inner">
                
                    <div class="left">
                        <a href="index.html" id="logo">ELITE</a>
                    </div><!-- End .left -->
                    
                    <div class="right">
                        <!-- eMenu -->
                        <nav>
                            <ul class="e-splitmenu" id="header-menu">
                                <li><span>Menu</span><a href="javascript:void(0);"><span class="arrow-down-10 plix-10"></span></a>
                                
                                     <div>
                                        <ul>
                                            <li><a href="index.html"><span class="stats2-10 plix-10"></span> Stats</a></li>
                                            <li><a href="index.html"><span class="lock-10 plix-10"></span> Security</a></li>
                                            <li><a href="index.html"><span class="download-10 plix-10"></span> Downloads</a></li>
                                        </ul>                                      
                                    </div>                               

                                </li>
                                <li><span>Settings</span><a href="javascript:void(0);"><span class="arrow-down-10 plix-10"></span></a>
                                
                                     <div>
                                        <ul>
                                            <li><a href="index.html"><span class="home-10 plix-10"></span> Basic Settings</a></li>
                                            <li><a href="index.html"><span class="settings-10 plix-10"></span> Site Settings</a></li>
                                            <li><a href="index.html"><span class="comment-10 plix-10"></span> User Settings</a></li>
                                            <li><a href="index.html"><span class="bookmark-10 plix-10"></span> Server Settings</a></li>
                                        </ul>                                      
                                    </div>
                                    
                                </li>
                        		<li class="e-menu-profile">
                                    <a href="javascript:void(0);"><span class="arrow-down-10 plix-10"></span></a> 
                                    <img src="images/avatar.jpg" alt=""/>
                                    
                                    <div>
                                        <ul>
                                            <li><a href="index.html"><span class="mail-10 plix-10"></span> Inbox</a></li>
                                            <li><a href="index.html"><span class="upload-10 plix-10"></span> Settings</a></li>
                                            <li><a href="index.html"><span class="info-10 plix-10"></span> Logout</a></li>
                                        </ul>                                      
                                    </div> 
                                            
                                </li>
                            </ul>
                        </nav>
                    </div><!-- End .right --> 
                    
                </div><!-- End #header-border --> 
            </div><!-- End #header-inner -->  
                
		</header><!-- End #header -->
        
        <!-- CONTENT -->
                 
        <div id="content">
            <div id="content-border">
            
                <!-- CONTENT HEADER -->
                
                <header id="content-header">
                    <div class="left">
                    	<a href="javascript:void(0);" id="toggle-mainmenu" class="button-icon tip-s" title="Toggle Main Menu"><span class="arrow-up-10 plix-10"></span></a>
                        
                        <!-- main search form -->
                        <form method="post" id="mainsearch">
                            <input type="text" placeholder="Live search..." name="" autocomplete="off"/>
                            <input type="submit" value="" />
                        </form>
                    </div><!-- End .left --> 
                    <div class="right">
                    	<!-- sidebar switch -->
                    	<a href="javascript:void(0);" id="toggle-sidebar" class="button-icon tip-s" title="Switch Main Menu"><span class="arrow-left-10 plix-10"></span></a>
                        
                        <!-- breadcrumbs -->
                        <nav id="main-breadcrumbs">
                            <ul>
                                <li class="bc-tab-first">
                                    <a href="index.html">Home</a>
                                </li>
                                <li>
                                    <a href="index.html">Interface Elements</a>
                                </li>
                                <li class="bc-tab-last">Misc</li>
                            </ul>          
                        </nav>
                        
                        <!-- demo dialog button -->
                        <a href="javascript:void(0);" id="open-main-dialog" class="button-text-icon tip-w" title="Some tooltip pointing right"><span class="fullscreen-10 plix-10"></span> Dialog</a>
                        
                        <!-- the main page dialog -->
                        <div id="main-page-dialog" title="Welcome to Elite" style="display:none">
                        <img src="images/jquery-ui-logo.png" alt="" class="dummy-img-dialog"/>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam sit amet est et mauris ornare lobortis dignissim quis massa. Donec ullamcorper turpis ac lectus semper commodo. Mauris tincidunt, erat et tempor interdum, dolor metus consectetur dui, eu accumsan augue augue a erat. Fusce justo nibh, tristique vitae pretium ut, venenatis nec felis. Curabitur congue tempor ultricies. Proin quis libero dignissim neque posuere pharetra vel adipiscing massa. Sed sit amet erat ac arcu sodales aliquam. Nam tellus sapien, ornare in tincidunt vel, ultricies id quam.
						</div>
                        
                        <span class="preloader"></span>
                        
                        <!-- widgets controls -->
                        <div id="widgets-controls">
                            <span class="preloader"></span>                       
                            <div class="icon-group"> 
                                <a href="javascript:void(0);" class="changeto-grid selected tip-s" title="Show grid"><span class="grid-10 plix-10"></span></a>
                                <span></span>
                                <a href="javascript:void(0);" class="changeto-rows tip-s" title="Show rows"><span class="rows-10 plix-10"></span></a>
                            </div>
                            
                            <!-- widgets management switch -->
                            <a href="javascript:void(0);" class="button-icon tip-s" title="Manage widgets" id="powerwidget-panel-switch"><span class="settings-10 plix-10"></span></a>
                        </div>
                    </div><!-- End .right -->                
                
				</header><!-- End #content-header --> 
                                
                <div id="content-inner">
                    
                    <!-- SIDEBAR -->
                    
                    <aside>
                    
                    	<!-- SIDEBAR PROFILE -->
                        
                    	<div id="sidebar-profile">
                            <div id="main-avatar">
                            	<span class="indicator">38</span>
                                <img src="images/avatar.jpg" alt=""/>
                            </div>
                            <div id="profile-info">
                                <div>
                                    <a href="javascript:void(0);"><b>Administrator</b></a>
                                    <a href="javascript:void(0);">Profile settings</a>
                                    <a href="javascript:void(0);">Server settings</a>
                                    <a href="javascript:void(0);">Logout</a>
                                </div>
                            </div>
                        </div>
                        
                        <!-- MAIN MENU -->
                        
                        <nav id="main-menu">
                            <ul>
                                <li><a href="index.html"><span class="home-16 plix-16"></span> Dashboard</a></li>
                                <li class="no-mobile"><a href="documentation.html"><span class="note-16 plix-16"></span> Documentation</a>
                                
                                    <ul>
                                    	<li><a href="doc-accordion.html">Accordion</a></li> 
                                    	<li><a href="doc-breadcrumbs.html">Breadcrumbs</a></li>
                                        <li><a href="doc-buttons.html">Buttons</a></li>
                                        <li><a href="doc-calendar.html">Calendar</a></li>
                                        <li><a href="doc-charts.html">Charts</a></li>
                                        <li><a href="doc-dialogs.html">Dialogs</a></li>
                                        <li><a href="doc-editors.html">Editors</a></li>
                                        <li><a href="doc-extra.html">Extra</a></li>
                                        <li><a href="doc-fileexplore.html">File Explore</a></li>
                                        <li><a href="doc-forms.html">Forms</a></li>
                                        <li><a href="doc-grid.html">Grid</a></li>
                                        <li><a href="doc-icons.html">Icons</a></li>
                                        <li><a href="doc-listsblocks.html">Lists &amp; Blocks</a></li>
                                        <li><a href="doc-media.html">Media</a></li>
                                        <li><a href="doc-listsblocks.html">Lists &amp; Blocks</a></li>
                                        <li><a href="doc-media.html">Media</a></li>
                                        <li><a href="doc-menus.html">Menus</a></li>
                                        <li><a href="doc-misc.html">Misc</a></li>
                                        <li><a href="doc-search.html">Search</a></li>
                                        <li><a href="doc-tables.html">Tables</a></li>
                                        <li><a href="doc-tabs.html">Tabs</a></li>
                                        <li><a href="doc-toolbars.html">Toolbars</a></li> 
                                        <li><a href="doc-widgets.html">Widgets</a></li>                                         
                                    </ul> 
                                                                   
                                </li>
                                <li><a href="calendar.html"><span class="calendar-16 plix-16"></span>Calendar<span class="color-indicator">28</span></a></li>
                                <li><a href="javascript:void(0);"><span class="postcard-16 plix-16"></span> Form Elements <span class="button-icon"><span class="plus-10 plix-10"></span></span></a>

                                    <ul>
                                    	<li><a href="editors.html">Editors</a></li>
                                    	<li><a href="forms.html">Forms</a></li>
                                        <li><a href="login.html">Login form 1</a></li>
                                        <li><a href="login-2.html">Login form 2</a></li>
                                        <li><a href="login-3.html">Login form 3</a></li>
                                        <li><a href="login-4.html">Login form 4</a></li>
                                        <li><a href="search.html">Search</a></li>
                                        <li><a href="wizard.html">Wizard</a></li>                                         
                                    </ul>
                                
                                </li>
                                <li><a href="media.html"><span class="image-16 plix-16"></span> Media</a></li>
                                <li><a href="planning.html"><span class="pencil-16 plix-16"></span> Planning</a></li>
                                <li><a href="maps.html"><span class="map-16 plix-16"></span> Google Maps <span class="indicator tip-w" title="Some tip goes here">tooltip</span></a></li>
                                <li><a href="fileexplore.html"><span class="folder-16 plix-16"></span> File Explore</a></li> 
                                <li><a href="javascript:void(0);"><span class="warning-16 plix-16"></span> Error pages<span class="button-icon"><span class="plus-10 plix-10"></span></span></a>

                                    <ul>
                                    	<li><a href="400.html">400</a></li>
                                    	<li><a href="401.html">401</a></li>
                                        <li><a href="403.html">403</a></li>
                                        <li><a href="404.html">404</a></li>
                                        <li><a href="500.html">500</a></li>
                                        <li><a href="503.html">503</a></li>                                         
                                    </ul>
                                
                                </li>                                                               
                                <li><a href="widgets.html"><span class="rows4-16 plix-16"></span> Widgets</a></li>
                                <li><a href="tables.html"><span class="cells-16 plix-16"></span> Tables</a></li>
                                <li><a href="charts.html"><span class="stats2-16 plix-16"></span> Charts </a></li>
                                <li class="menu-open page-active"><a href="javascript:void(0);"><span class="controls-16 plix-16"></span> Interface Elements <span class="button-icon"><span class="min-10 plix-10"></span></span></a>
                                
                                    <ul>
                                    	<li><a href="accordion.html">Accordion</a></li>                                        
                                        <li><a href="breadcrumbs.html">Breadcrumbs</a></li>
                                        <li><a href="buttons.html">Buttons</a></li>
                                        <li><a href="dialogs.html">Dialogs</a></li>
                                        <li><a href="icons.html">Icons</a></li>
                                        <li><a href="listsblocks.html">Lists &amp; Blocks</a></li>
                                        <li><a href="menus.html">Menus</a></li>
                                        <li class="page-active"><a href="misc.html">Misc</a></li>
                                        <li><a href="tabs.html">Tabs</a></li>
                                        <li><a href="toolbars.html">Toolbars</a></li>
                                    </ul>         
                                                           
                                </li>
                                <li><a href="grid.html"><span class="layout3-16 plix-16"></span> Grid <span class="indicator">960</span></a></li>
                            </ul>
                        </nav>                      
                    </aside>
                    
                    <!-- sidebar meta stats -->
                    <div id="sidebar-meta">
                    	<div id="sidebar-meta-inner">
                        	<div>
                                <p class="left">Space</p> 
                                <p class="right">4,551 MB / 10 GB</p>
                            </div>
                            <div class="pbar">
                               <span style="width:50%"></span>                            
                            </div>
                        	<div>
                                <p class="left">Traffic</p> 
                                <p class="right">8,001 MB / 10 GB</p>
                            </div>
                            <div class="pbar">
                               <span style="width:81%"></span>                            
                            </div>
                        </div>  
                    </div> 
                     
                    <!-- CONTENT -->
                    
					<div id="content-main">
                        <div id="content-main-inner">
                             
                            <!-- widgets management panel --> 
                            <div id="powerwidgetspanel" class="powerwidgetspanel">
                                <header>
                                    <h2>Power widgets panel</h2>
                                </header>
                                <div class="powerwidgetspanel-widget" data-widget-id="widget1">
                                    <input type="checkbox"/>
                                    <label>Tooltips</label>
                                </div>
                                <div class="powerwidgetspanel-widget" data-widget-id="widget2">
                                    <input type="checkbox"/>
                                    <label>Countdown</label>                         
                                </div>
                                <div class="powerwidgetspanel-widget" data-widget-id="widget3">
                                    <input type="checkbox"/>
                                    <label>eScrollbar</label>
                                </div>
                                <div class="powerwidgetspanel-widget" data-widget-id="widget4">
                                    <input type="checkbox"/>
                                    <label>eProgressbar</label>                            
                                </div> 
                                <div class="powerwidgetspanel-widget" data-widget-id="widget5">
                                    <input type="checkbox"/>
                                    <label>HTML5 audio player</label>                            
                                </div>                                                                                               
                                <div class="powerwidgetspanel-widget" data-widget-id="widget6">
                                    <input type="checkbox"/>
                                    <label>preloaders</label>                             
                                </div>                                                        
                            </div> 
                                                
                            <div class="page-header">
                                <h2>Misc</h2>
                                <span class="page-helper">1.0</span>
                                <a href="doc-misc.html" class="page-helper">Documentation</a>
                                 <a href="javascript:void(0);" class="page-helper empty-local-storage">Clear storage</a>
                                <p>Some stuff that dont have there own page.</p>
                            </div>
                                                                                
							<!-- Start grid -->                            
                            <section class="g_1_2">
                            
                                <!-- New widget -->
                                
                                <div class="powerwidget" id="widget1">
                                    <header>
                                    	<h2>Tooltips</h2>                                  
                                    </header>
                                    <div>
                                        <div class="inner-spacer"> 
                                            <div class="tooltip-demobox">
                                                <div>
                                                    <div>
                                                        <a href="javascript:void(0);" class="tip-nw" title="class: tip-nw | gravity: nw">Northwest</a>
                                                    </div>
                                                    <div>    
                                                        <a href="javascript:void(0);" class="tip-n" title="class: tip-n | gravity: n">North</a>
                                                    </div>
                                                    <div>  
                                                        <a href="javascript:void(0);" class="tip-ne" title="class: tip-ne | gravity: ne">Northeast</a>
                                                    </div>
                                                </div>
                                                <div>
                                                    <div>
                                                        <a href="javascript:void(0);" class="tip-w" title="class: tip-w | gravity: w">West</a>
                                                    </div>
                                                    <div>  
                                                        <a href="javascript:void(0);" title="direction top">&nbsp;</a>
                                                    </div>
                                                    <div>  
                                                        <a href="javascript:void(0);" class="tip-e" title="class: tip-e | gravity: e">East</a>
                                                    </div>
                                                </div>
                                                <div>
                                                    <div>
                                                        <a href="javascript:void(0);" class="tip-sw" title="class: tip-sw | gravity: sw">Southwest</a>
                                                    </div>
                                                    <div>  
                                                        <a href="javascript:void(0);" class="tip-s" title="class: tip-s | gravity: s">South</a>
                                                    </div>
                                                    <div>  
                                                        <a href="javascript:void(0);" class="tip-se" title="class: tip-se | gravity: se">Southeast</a>
                                                    </div>
                                                </div>                                                                                
                                            </div>                                     
                                        </div>
                                    </div>    
                                </div><!-- End .powerwidget -->
                            </section>

                            <section class="g_1_2_last">
                            
                                <!-- New widget -->
                                
                                <div class="powerwidget" id="widget2">
                                    <header>
                                    	<h2>Countdown</h2>                                  
                                    </header>
                                    <div>
                                        <div class="inner-spacer"> 
                                            <label class="g_1_4">Basic:</label> 
                                            <div class="g_3_4_last">
                                                <div id="countdown-1"></div>  
                                            </div>
                                            
                                            <div class="spacer-20"><!-- spacer 20px --></div>  
                                            
                                            <label class="g_1_4">Custom order:</label> 
                                            <div class="g_3_4_last">
                                                <div id="countdown-2"></div>
                                            </div>                                                                       
                                        </div>
                                    </div>    
                                </div><!-- End .powerwidget -->
                            </section>
                            
                            <div class="clear"><!-- New row --></div>  

                            <section class="g_1">
                                <!-- New widget -->
                                
                                <div class="powerwidget" id="widget3">
                                    <header>
                                    	<h2>eScrollbar</h2>                                  
                                    </header>
                                    <div>
                                        <div class="inner-spacer"> 
                                            <label class="g_1_4">Basic:</label> 
                                            <div class="g_3_4_last">
                                                <div class="input-scroll-box">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus malesuada tellus nec tortor consectetur tincidunt. Donec dictum mattis dolor, eget porta nunc molestie quis. Nam vehicula, urna sed ornare semper, justo dolor fringilla quam, eget lobortis dolor urna volutpat odio. Nulla eu est erat, at vestibulum elit. Vestibulum eget ipsum sem. Aliquam enim eros, accumsan id iaculis eget, sagittis id tortor. Fusce id orci eu magna rhoncus suscipit. Curabitur auctor, lorem eget gravida sagittis, diam elit pellentesque odio, vitae euismod sapien diam vel tellus. Cras non commodo magna.
<br/><br/>
Donec condimentum placerat tincidunt. Aliquam lacinia commodo fermentum. Ut vehicula convallis ipsum, ut ultricies arcu dignissim quis. Nullam lacinia, est ac mollis eleifend, metus ante luctus tellus, ac sollicitudin magna metus ac ipsum. Mauris lorem massa, tincidunt vel venenatis ut, ultrices ut enim. Fusce erat nisl, vehicula non dapibus in, posuere nec mi. Phasellus eros felis, placerat non pharetra et, pharetra a libero. Proin condimentum blandit velit sit amet vestibulum. Donec faucibus tortor et massa iaculis aliquet.                                                 
<br/><br/>
Proin elementum metus volutpat dui sagittis a ultrices lorem sollicitudin. Proin non nisl sit amet tortor viverra blandit. Nam sed justo facilisis orci sagittis sodales. Mauris orci nibh, auctor a rutrum eget, ullamcorper id nibh. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Aliquam erat volutpat. Sed faucibus interdum egestas. Nam porttitor, lacus vitae pellentesque malesuada, ipsum mauris hendrerit dolor, vel pulvinar orci sapien id metus. Praesent sit amet velit vitae nibh ullamcorper mollis. Curabitur nulla libero, molestie quis volutpat nec, imperdiet a magna.
<br/><br/>
Mauris nec eros elit. Quisque a commodo felis. Sed vitae dolor ipsum. Sed magna nunc, lobortis sit amet egestas ut, fringilla quis elit. Integer congue sem quis tellus volutpat at commodo massa mollis. Ut bibendum ipsum tempor velit porta aliquam. Phasellus sed turpis ipsum, sit amet dignissim felis. Fusce semper rutrum magna, nec consectetur justo iaculis ut. Nunc non nisl turpis.
<br/><br/>
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Sed et augue non diam consequat tincidunt. Praesent non felis massa, quis condimentum neque. Proin eu convallis turpis. Nulla blandit rutrum justo, fermentum gravida nisl semper eu. Praesent magna nulla, sollicitudin ut gravida et, accumsan rhoncus est. Donec justo nibh, hendrerit a molestie aliquam, hendrerit vitae ligula. Quisque a odio et quam fringilla tempor at vel mauris. Duis ultricies mattis nunc vitae euismod.                                                 
                                                
                                                </div>  
                                            </div>
                                                                                                           
                                        </div>
                                    </div>    
                                </div><!-- End .powerwidget -->
                            </section>
                            
                            <div class="clear"><!-- New row --></div>  

                            <section class="g_1">
 
                                <!-- New widget -->

                                <div class="powerwidget" id="widget4">
                                    <header>
                                        <h2>eProgressbar</h2>
                                    </header>                               
                                    <div>
                                    	<div class="inner-spacer">
                                            <label class="g_1_4">Basic(50%):</label> 
                                            <div class="g_3_4_last" id="progressbar-demo-1">
                                                <div class="e-progressbar" data-progressbar-value="50" data-progressbar-color="#670cff"></div>  
                                            </div>
                                            
                                            <div class="spacer-20"><!-- spacer 20px --></div> 
                                            
                                            <label class="g_1_4">Animated(75%):</label> 
                                            <div class="g_3_4_last" id="progressbar-demo-2">
                                                <div class="e-progressbar" data-progressbar-value="75" data-progressbar-color="#13b4f0"></div>  
                                            </div>
                                            
                                            <div class="spacer-20"><!-- spacer 20px --></div> 
                                            
                                            <label class="g_1_4">Animated loop:</label> 
                                            <div class="g_3_4_last" id="progressbar-demo-3">
                                                <div class="e-progressbar" data-progressbar-value="70" data-progressbar-color="#f07b13"></div>
                                                <div class="spacer-10"><!-- spacer 20px --></div>
                                                <div class="e-progressbar" data-progressbar-value="20" data-progressbar-color="#fa2768"></div>
                                                <div class="spacer-10"><!-- spacer 20px --></div>
                                                <div class="e-progressbar" data-progressbar-value="100" data-progressbar-color="#22da0f"></div>   
                                            </div>

                                            <div class="spacer-20"><!-- spacer 20px --></div> 
                                            
                                            <label class="g_1_4">Small(66%):</label> 
                                            <div class="g_3_4_last" id="progressbar-demo-4">
                                                <div class="e-progressbar e-progressbar-small" data-progressbar-value="66" data-progressbar-color="#dd3d39"></div>  
                                            </div>  

                                            <div class="spacer-20"><!-- spacer 20px --></div> 
                                            
                                            <label class="g_1_4">Big(89%):</label> 
                                            <div class="g_3_4_last" id="progressbar-demo-6">
                                                <div class="e-progressbar e-progressbar-big" data-progressbar-value="89" data-progressbar-color="#4a284a"></div>  
                                            </div>                                                                                       
                                        </div>                                            
                                    </div>
                                </div><!-- End .powerwidget --> 
                      
								<!-- New widget --> 
                                 
                                <div class="powerwidget" id="widget6">
                                    <header>
                                        <h2>HTML5 audio player</h2>
                                    </header>
                                    <div>
                                    	<div class="inner-spacer">
                                            <div class="audiojsZ">
                                                <audio src="http://s3.amazonaws.com/audiojs/02-juicy-r.mp3" preload="auto"></audio>
                                                <div class="play-pauseZ">
                                                    <p class="playZ"></p>
                                                    <p class="pauseZ"></p>
                                                    <p class="loadingZ"></p>
                                                    <p class="errorZ"></p>
                                                </div>
                                                <div class="scrubberZ">
                                                    <div class="progressZ"></div>
                                                    <div class="loadedZ"></div>
                                                </div>
                                                <div class="timeZ">
                                                    <em class="playedZ">00:00</em>/<strong class="durationZ">00:00</strong>
                                                </div>
                                                <div class="error-messageZ"></div>
                                            </div>
                                    	</div>
                                    </div>
                                </div><!-- End .powerwidget -->  
                                
                                <!-- New widget -->
                                
                                <div class="powerwidget" id="widget5">
                                    <header>
                                    	<h2>Preloaders</h2>                                  
                                    </header>
									<div>
                                        <div class="inner-spacer">
                                            <p>Preloader images. Can be used on most background colors. More than 60 preloaders available.</p>
                                            <div class="spacer-5"><!-- spacer 5px --></div> 
                                            <div class="basic-wrapper">
                                            
                                                <div class="preloader-demobox">
                                                    <div>
                                                        <div>
                                                            <img src="images/loaders/type1/light/12.gif" alt="" style="margin:-6px 0 0 -6px"/>
                                                            <span>type1/light/12.gif</span>
                                                        </div> 
                                                        <div>
                                                            <img src="images/loaders/type1/light/16.gif" alt="" style="margin:-8px 0 0 -8px"/>
                                                            <span>type1/light/16.gif</span>
                                                        </div> 
                                                        <div>
                                                            <img src="images/loaders/type1/light/20.gif" alt="" style="margin:-10px 0 0 -10px"/>
                                                            <span>type1/light/20.gif</span>
                                                        </div>
                                                        <div>
                                                            <img src="images/loaders/type1/light/24.gif" alt="" style="margin:-12px 0 0 -12px"/>
                                                            <span>type1/light/24.gif</span>
                                                        </div> 
                                                        <div>
                                                            <img src="images/loaders/type1/light/32.gif" alt="" style="margin:-16px 0 0 -16px"/>
                                                            <span>type1/light/32.gif</span>
                                                        </div>                                         
                                                    </div>
            
                                                    <div class="type-dark-bg">
                                                        <div>
                                                            <img src="images/loaders/type1/dark/12.gif" alt="" style="margin:-6px 0 0 -6px"/>
                                                            <span>type1/dark/12.gif</span>
                                                        </div> 
                                                        <div>
                                                            <img src="images/loaders/type1/dark/16.gif" alt="" style="margin:-8px 0 0 -8px"/>
                                                            <span>type1/dark/16.gif</span>
                                                        </div> 
                                                        <div>
                                                            <img src="images/loaders/type1/dark/20.gif" alt="" style="margin:-10px 0 0 -10px"/>
                                                            <span>type1/dark/20.gif</span>
                                                        </div>
                                                        <div>
                                                            <img src="images/loaders/type1/dark/24.gif" alt="" style="margin:-12px 0 0 -12px"/>
                                                            <span>type1/dark/24.gif</span>
                                                        </div> 
                                                        <div>
                                                            <img src="images/loaders/type1/dark/32.gif" alt="" style="margin:-16px 0 0 -16px"/>
                                                            <span>type1/dark/32.gif</span>
                                                        </div>                                         
                                                    </div>
                                                    
                                                    <div>
                                                        <div>
                                                            <img src="images/loaders/type2/light/12.gif" alt="" style="margin:-6px 0 0 -6px"/>
                                                            <span>type2/light/12.gif</span>
                                                        </div> 
                                                        <div>
                                                            <img src="images/loaders/type2/light/16.gif" alt="" style="margin:-8px 0 0 -8px"/>
                                                            <span>type2/light/16.gif</span>
                                                        </div> 
                                                        <div>
                                                            <img src="images/loaders/type2/light/20.gif" alt="" style="margin:-10px 0 0 -10px"/>
                                                            <span>type2/light/20.gif</span>
                                                        </div>
                                                        <div>
                                                            <img src="images/loaders/type2/light/24.gif" alt="" style="margin:-12px 0 0 -12px"/>
                                                            <span>type2/light/24.gif</span>
                                                        </div> 
                                                        <div>
                                                            <img src="images/loaders/type2/light/32.gif" alt="" style="margin:-16px 0 0 -16px"/>
                                                            <span>type2/light/32.gif</span>
                                                        </div>                                         
                                                    </div>                                        
            
                                                    <div class="type-dark-bg">
                                                        <div>
                                                            <img src="images/loaders/type2/dark/12.gif" alt="" style="margin:-6px 0 0 -6px"/>
                                                            <span>type2/dark/12.gif</span>
                                                        </div> 
                                                        <div>
                                                            <img src="images/loaders/type2/dark/16.gif" alt="" style="margin:-8px 0 0 -8px"/>
                                                            <span>type2/dark/16.gif</span>
                                                        </div> 
                                                        <div>
                                                            <img src="images/loaders/type2/dark/20.gif" alt="" style="margin:-10px 0 0 -10px"/>
                                                            <span>type2/dark/20.gif</span>
                                                        </div>
                                                        <div>
                                                            <img src="images/loaders/type2/dark/24.gif" alt="" style="margin:-12px 0 0 -12px"/>
                                                            <span>type2/dark/24.gif</span>
                                                        </div> 
                                                        <div>
                                                            <img src="images/loaders/type2/dark/32.gif" alt="" style="margin:-16px 0 0 -16px"/>
                                                            <span>type2/dark/32.gif</span>
                                                        </div>                                         
                                                    </div>                                          
                                                      
                                                    <div>
                                                        <div>
                                                            <img src="images/loaders/type3/light/12.gif" alt="" style="margin:-6px 0 0 -6px"/>
                                                            <span>type3/light/12.gif</span>
                                                        </div> 
                                                        <div>
                                                            <img src="images/loaders/type3/light/16.gif" alt="" style="margin:-8px 0 0 -8px"/>
                                                            <span>type3/light/16.gif</span>
                                                        </div> 
                                                        <div>
                                                            <img src="images/loaders/type3/light/20.gif" alt="" style="margin:-10px 0 0 -10px"/>
                                                            <span>type3/light/20.gif</span>
                                                        </div>
                                                        <div>
                                                            <img src="images/loaders/type3/light/24.gif" alt="" style="margin:-12px 0 0 -12px"/>
                                                            <span>type3/light/24.gif</span>
                                                        </div> 
                                                        <div>
                                                            <img src="images/loaders/type3/light/32.gif" alt="" style="margin:-16px 0 0 -16px"/>
                                                            <span>type3/light/32.gif</span>
                                                        </div>                                         
                                                    </div>                                        
            
                                                    <div class="type-dark-bg">
                                                        <div>
                                                            <img src="images/loaders/type3/dark/12.gif" alt="" style="margin:-6px 0 0 -6px"/>
                                                            <span>type3/dark/12.gif</span>
                                                        </div> 
                                                        <div>
                                                            <img src="images/loaders/type3/dark/16.gif" alt="" style="margin:-8px 0 0 -8px"/>
                                                            <span>type3/dark/16.gif</span>
                                                        </div> 
                                                        <div>
                                                            <img src="images/loaders/type3/dark/20.gif" alt="" style="margin:-10px 0 0 -10px"/>
                                                            <span>type3/dark/20.gif</span>
                                                        </div>
                                                        <div>
                                                            <img src="images/loaders/type3/dark/24.gif" alt="" style="margin:-12px 0 0 -12px"/>
                                                            <span>type3/dark/24.gif</span>
                                                        </div> 
                                                        <div>
                                                            <img src="images/loaders/type3/dark/32.gif" alt="" style="margin:-16px 0 0 -16px"/>
                                                            <span>type3/dark/32.gif</span>
                                                        </div>                                         
                                                    </div>
                                                                                                                                                                                                                                                            <div>
                                                        <div>
                                                            <img src="images/loaders/type4/light/20.gif" alt="" style="margin:-2px 0 0 -13px"/>
                                                            <span>type4/light/20.gif</span>
                                                        </div>
                                                        <div>
                                                            <img src="images/loaders/type4/light/26.gif" alt="" style="margin:-3px 0 0 -13px"/>
                                                            <span>type4/light/26.gif</span>
                                                        </div>
                                                        <div>
                                                            <img src="images/loaders/type4/light/36.gif" alt="" style="margin:-5px 0 0 -18px"/>
                                                            <span>type4/light/36.gif</span>
                                                        </div>                                            
                                                        <div>
                                                            <img src="images/loaders/type4/light/46.gif" alt="" style="margin:-6px 0 0 -23px"/>
                                                            <span>type4/light/46.gif</span>
                                                        </div> 
                                                        <div>
                                                            <img src="images/loaders/type4/light/56.gif" alt="" style="margin:-10px 0 0 -28px"/>
                                                            <span>type4/light/56.gif</span>
                                                        </div>                                    
                                                    </div> 
                                                                                           
                                                    <div class="type-dark-bg">
                                                        <div><span>not available</span></div>  
                                                        <div><span>not available</span></div>  
                                                        <div><span>not available</span></div> 
                                                        <div><span>not available</span></div> 
                                                        <div><span>not available</span></div>                                         
                                                    </div>
                                                    
                                                    <div>
                                                        <div>
                                                            <img src="images/loaders/type5/light/12.gif" alt="" style="margin:-6px 0 0 -6px"/>
                                                            <span>type5/light/12.gif</span>
                                                        </div> 
                                                        <div>
                                                            <img src="images/loaders/type5/light/16.gif" alt="" style="margin:-8px 0 0 -8px"/>
                                                            <span>type5/light/16.gif</span>
                                                        </div> 
                                                        <div>
                                                            <img src="images/loaders/type5/light/20.gif" alt="" style="margin:-10px 0 0 -10px"/>
                                                            <span>type5/light/20.gif</span>
                                                        </div>
                                                        <div>
                                                            <img src="images/loaders/type5/light/24.gif" alt="" style="margin:-12px 0 0 -12px"/>
                                                            <span>type5/light/24.gif</span>
                                                        </div> 
                                                        <div>
                                                            <img src="images/loaders/type5/light/32.gif" alt="" style="margin:-16px 0 0 -16px"/>
                                                            <span>type5/light/32.gif</span>
                                                        </div>                                         
                                                    </div>                                        
            
                                                     <div class="type-dark-bg">
                                                        <div>
                                                            <img src="images/loaders/type5/dark/12.gif" alt="" style="margin:-6px 0 0 -6px"/>
                                                            <span>type5/dark/12.gif</span>
                                                        </div> 
                                                        <div>
                                                            <img src="images/loaders/type5/dark/16.gif" alt="" style="margin:-8px 0 0 -8px"/>
                                                            <span>type5/dark/16.gif</span>
                                                        </div> 
                                                        <div>
                                                            <img src="images/loaders/type5/dark/20.gif" alt="" style="margin:-10px 0 0 -10px"/>
                                                            <span>type5/dark/20.gif</span>
                                                        </div>
                                                        <div>
                                                            <img src="images/loaders/type5/dark/24.gif" alt="" style="margin:-12px 0 0 -12px"/>
                                                            <span>type5/dark/24.gif</span>
                                                        </div> 
                                                        <div>
                                                            <img src="images/loaders/type5/dark/32.gif" alt="" style="margin:-16px 0 0 -16px"/>
                                                            <span>type5/dark/32.gif</span>
                                                        </div>                                         
                                                    </div>                                          
            
                                                    <div>
                                                        <div>
                                                            <img src="images/loaders/type6/light/40.gif" alt="" style="margin:-5px 0 0 -20px"/>
                                                            <span>type6/light/40.gif</span>
                                                        </div> 
                                                        <div>
                                                            <img src="images/loaders/type6/light/50.gif" alt="" style="margin:-5px 0 0 -25px"/>
                                                            <span>type6/light/50.gif</span>
                                                        </div> 
                                                        <div>
                                                            <img src="images/loaders/type6/light/60.gif" alt="" style="margin:-6px 0 0 -30px"/>
                                                            <span>type6/light/60.gif</span>
                                                        </div>
                                                        <div>
                                                            <img src="images/loaders/type6/light/70.gif" alt="" style="margin:-6px 0 0 -35px"/>
                                                            <span>type6/light/70.gif</span>
                                                        </div> 
                                                        <div>
                                                            <img src="images/loaders/type6/light/80.gif" alt="" style="margin:-6px 0 0 -40px"/>
                                                            <span>type6/light/80.gif</span>
                                                        </div>                                         
                                                    </div>                                        
            
                                                    <div class="type-dark-bg">
                                                        <div>
                                                            <img src="images/loaders/type6/dark/40.gif" alt="" style="margin:-5px 0 0 -20px"/>
                                                            <span>type6/dark/40.gif</span>
                                                        </div> 
                                                        <div>
                                                            <img src="images/loaders/type6/dark/50.gif" alt="" style="margin:-5px 0 0 -25px"/>
                                                            <span>type6/dark/50.gif</span>
                                                        </div> 
                                                        <div>
                                                            <img src="images/loaders/type6/dark/60.gif" alt="" style="margin:-6px 0 0 -30px"/>
                                                            <span>type6/dark/60.gif</span>
                                                        </div>
                                                        <div>
                                                            <img src="images/loaders/type6/dark/70.gif" alt="" style="margin:-6px 0 0 -35px"/>
                                                            <span>type6/dark/70.gif</span>
                                                        </div> 
                                                        <div>
                                                            <img src="images/loaders/type6/dark/80.gif" alt="" style="margin:-6px 0 0 -40px"/>
                                                            <span>type6/dark/80.gif</span>
                                                        </div>                                         
                                                    </div> 
            
                                                    <div>
                                                        <div>
                                                            <img src="images/loaders/type7/light/12.gif" alt="" style="margin:-6px 0 0 -6px"/>
                                                            <span>type7/light/12.gif</span>
                                                        </div> 
                                                        <div>
                                                            <img src="images/loaders/type7/light/16.gif" alt="" style="margin:-8px 0 0 -8px"/>
                                                            <span>type7/light/16.gif</span>
                                                        </div> 
                                                        <div>
                                                            <img src="images/loaders/type7/light/20.gif" alt="" style="margin:-10px 0 0 -10px"/>
                                                            <span>type7/light/20.gif</span>
                                                        </div>
                                                        <div>
                                                            <img src="images/loaders/type7/light/24.gif" alt="" style="margin:-12px 0 0 -12px"/>
                                                            <span>type7/light/24.gif</span>
                                                        </div> 
                                                        <div>
                                                            <img src="images/loaders/type7/light/32.gif" alt="" style="margin:-16px 0 0 -16px"/>
                                                            <span>type7/light/32.gif</span>
                                                        </div>                                         
                                                    </div>
                                                    
                                                    <div class="type-dark-bg">
                                                        <div><span>not available</span></div>  
                                                        <div><span>not available</span></div>  
                                                        <div><span>not available</span></div> 
                                                        <div><span>not available</span></div> 
                                                        <div><span>not available</span></div>                                         
                                                    </div>                                                                                                                                                                             
                                                </div>                                                                                               
                                            </div><!-- End .basic-wrapper -->  
										</div>
                                    </div>
                                </div><!-- End .powerwidget -->
                                
                            </section> 
                                                                                                                      
                            <div class="clear"><!-- New row --></div>      
                                                                                                                                                                                                        
                            <!-- End grid -->
                                                   
                       </div><!-- End #content-main-inner --> 
                    </div><!-- End #content-main --> 
                </div><!-- End #content-inner --> 
                
                <!-- CONTENT FOOTER -->
                
                <footer id="content-footer">
                    <div class="left">
						<div class="left">
                               <a href="javascript:void(0);" class="button-icon tip-s" title="Some action">
                                  <span class="folder-10 plix-10"></span>
                              </a>                                                        
                              <a href="javascript:void(0);" class="button-icon tip-s" title="Some action">
                                  <span class="pencil-10 plix-10"></span>
                              </a>
                          </div><!-- End .left -->
                          <div class="right">
                              <a href="javascript:void(0);" class="button-icon tip-s" title="Some action">
                                  <span class="refresh-10 plix-10"></span>
                              </a> 
                          </div> <!-- End .right --> 
                    </div><!-- End .left --> 
                    <div class="right">
                    	<div class="left">
                    	Copyright © 2012 <a href="http://bit.ly/ldjfWQ">CreativeMilk</a>
                        </div><!-- End .left -->
                        <div class="right">
                        	<div class="theme-version">Version 1.0</div>
                        </div><!-- End .right -->
                    </div><!-- End .right -->                
                </footer><!-- End #content-footer -->                 
            </div><!-- End #content-border --> 
        </div><!-- End #content --> 
            
    </div><!-- End #container -->
    
    <!-- scroll to top link -->
    <div id="scrolltotop"><span></span></div> 
    
</body>
</html>